<template>
  <view class="content">
    <view class="search">
      <u-search v-model="searchText" clearabled placeholder="搜索你感兴趣的内容/社区/活动" borderColor="#13D069" shape="round"
                bgColor="#FFFFFF" :showAction="true" actionText="取消" :animation="false" @custom="toIndex"
                :actionStyle="searchstyle"></u-search>
    </view>
    <u-tabs :list="list1">
      <view slot="right" style="padding-left: 4px;">
        <view class="rightsolt"> 收起</view>
      </view>
    </u-tabs>
    <view>
      <view class="history">
        <view class="topTitle">
          <view class="historytop">
            <view class="text">历史记录</view>
            <view class="delete">
              <u-icon name="trash" size="25" color="red" class="icon"></u-icon>
            </view>
          </view>
        </view>
        <view class="tabs">
          <view class="tab1" v-for="tab in list1" :key="tab.name" @click="clickTab(tab)">{{tab.name}}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {

    return {
      searchstyle: {
        color: "#3D3D3D",
        fontSize: "35rpx",
        fontWeight: "600"
      },
      single: '',
      start: "",
      enday: false,
      showBirthday: false,
      birthday: Number(new Date()),
      end: "",
      show: false,
      mode: 'range',
      datetimesingle: '',
      historySearch: ['搜索词1', '搜索词2', '搜索词3', '搜索词4'],
      recommendList: ["美女", "帅哥", "宠物", "卡通"],
      searchText: "",
      list1: [{
        name: '关注',
      }, {
        name: '推荐',
      }, {
        name: '电影'
      }, {
        name: '科技'
      }, {
        name: '音乐'
      }, {
        name: '美食'
      }, {
        name: '文化'
      }, {
        name: '财经'
      }, {
        name: '手工'
      }],
      aaa: {
        color: "#3D3D3D",
        fontSize: "35rpx",
        fontWeight: "600",
        background: "#F4F4F4",
        border: "none",
        height: "51rpx"

      },
      an1: {
        color: "#13D069",
        background: "white",
        borderRadius: "8rpx",

      },
      an2: {

        color: "white",
        background: "#13D069",
        borderRadius: "8rpx",
        margin: " 0 17rpx",

      },
    }


  },
  methods: {
    toIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    },
    bindDateChange: function(e) {
      this.date = e.detail.value
    },

    close(e) {
      console.log(e)
    },
    birthdayClose() {
      this.showBirthday = false
    },
    birthdayConfirm(e) {
      console.log(e)
      this.showBirthday = false
      this.start = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')

    },
    hideKeyboard() {
      uni.hideKeyboard()

    },
    endClose() {
      this.enday = false
    },
    endConfirm(e) {
      console.log(e)
      this.enday = false
      this.end = uni.$u.timeFormat(e.value, 'yyyy-mm-dd')

    }

  },
  computed: {

  }
}
</script>

<style lang="scss">
.nsearch {

  display: flex;
  justify-content: space-between;
  flex-direction: row;

  &-son {
    flex: 1;
    display: flex;
    justify-content: space-between;
    margin: 0;
  }
}

.example-body {
  background-color: #fff;
  padding: 10px;

  .aa {
    border: none;
  }
}

.content {
  margin: 40rpx 20rpx;
  padding: 40rpx 0;
}

.search {
  margin-top: 22rpx;
}

.history {
  margin-top: 22rpx;

  .historytop {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .text {
      flex: 1
    }

    .delete {

      .icon {}
    }
  }
}

.neiron {
  margin-top: 22rpx;

  .neirontop {
    display: flex;
    justify-content: space-between;
    align-items: center;

    .text {
      flex: 1
    }

    .delete {

      .icon {}
    }
  }
}

.tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 20rpx;

  .tab1 {
    background: #F6F8FA;
    font-size: 28rpx;
    color: #333;
    padding: 10rpx 28rpx;
    border-radius: 50rpx;
    margin-right: 20rpx;
    margin-top: 20rpx;
  }
}

.list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 5rpx;
  padding: 20rpx 5rpx;

  .item {
    height: 440rpx;

    image {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}

.rightsolt {
  background: #E1E1E1;
  font-size: 24rpx;
  color: #333;
  padding: 10rpx 28rpx;
  border-radius: 7rpx;

}
</style>
